<template>
  <i-form
    :model="form"
    :label-width="80"
    @submit.native.prevent="onSubmit()"
    :rules="rules"
    ref="new-course-form"
  >
    <i-row :gutter="8">
      <i-col :span="18">
        <i-card dis-hover>
          <i-form-item class="margin-top-20">
            <i-radio-group v-model="form.courseType" type="button">
              <i-radio :label="0">课程</i-radio>
              <i-radio :label="1">新闻</i-radio>
            </i-radio-group>
          </i-form-item>
          <i-row :gutter="8" type="flex">
            <i-col :span="18">
              <i-form-item label="标题" prop="title">
                <i-input v-model="form.title"></i-input>
              </i-form-item>
            </i-col>
            <i-col :span="6" v-if="form.courseType == 0">
              <i-form-item prop="edition" class="no-label">
                <editions :value.sync="form.edition"></editions>
              </i-form-item>
            </i-col>
          </i-row>
          <i-form-item label="简介">
            <i-input type="textarea" :rows="5" v-model="form.description"></i-input>
          </i-form-item>
          <i-form-item label="附件" class="attachments" style="min-height:200px" prop="files">
            <i-row>
              <i-col :span="12">
                <i-checkbox v-model="form.attachmentsEnableDownload">附件允许下载</i-checkbox>
              </i-col>
              <i-col :span="12" style="text-align:right" v-show="authorVisible">
                <author :value.sync="form.createdById" ref="author"></author>
              </i-col>
            </i-row>
            <uploader :type="0" :files.sync="form.files" text="上传文档或视频" ref="uploader"></uploader>
            <!-- <i-upload :action="uploadUrl" :multiple="true" :format="formats" :on-success="uploaded">
            <i-button type="ghost" icon="ios-cloud-upload-outline">上传文档或视频</i-button>
            </i-upload>-->
          </i-form-item>
        </i-card>
      </i-col>
      <i-col :span="6">
        <i-card v-if="form.courseType == 0" class="margin-bottom-10" dis-hover>
          <p slot="title">
            <i-icon type="navicon-round"></i-icon>
            <span>年级、科目</span>
          </p>
          <i-form-item class="no-label margin-top-10" prop="grade">
            <grades :value.sync="form.grade"></grades>
          </i-form-item>
          <i-form-item class="no-label" prop="subject">
            <subjects :value.sync="form.subject"></subjects>
          </i-form-item>
        </i-card>
        <i-card dis-hover>
          <p slot="title">
            <i-icon type="paper-airplane"></i-icon>
            <span>发布</span>
          </p>
          <i-form-item :label="tagLabel" class="no-label" prop="tags">
            <tag-selector
              :label="tagLabel"
              :values.sync="form.tags"
              :subject="form.subject"
              :grade="form.grade"
            ></tag-selector>
          </i-form-item>
          <i-button html-type="submit" type="primary" long>保存</i-button>
          <i-button class="margin-top-8" html-type="reset" long>取消</i-button>
        </i-card>
      </i-col>
    </i-row>
  </i-form>
</template>

<script>
import Editions from '../components/filters/Editions'
import Grades from '../components/filters/Grades'
import Subjects from '../components/filters/Subjects'
import TagSelector from '../components/tag-selector'
import Uploader from '../components/uploader'
import Author from '../components/author'
import { mapGetters, mapActions } from 'vuex'
export default {
  components: {
    Editions,
    Subjects,
    Grades,
    TagSelector,
    Uploader,
    Author
  },
  data() {
    return {
      form: {
        id: null,
        subject: null,
        grade: null,
        courseType: 0,
        title: null,
        description: null,
        attachmentsEnableDownload: false,
        tags: [],
        files: [],
        createdById: null
      },
      rules: {
        title: {
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        },
        edition: {
          required: true,
          type: 'number',
          message: '请选择教材版本',
          trigger: 'change'
        },
        grade: {
          required: true,
          type: 'number',
          message: '请选择年级',
          trigger: 'change'
        },
        subject: {
          required: true,
          type: 'number',
          message: '请选择科目',
          trigger: 'change'
        },
        files: {
          type: 'array',
          required: true,
          message: '请上传附件',
          trigger: 'change'
        }
      }
    }
  },
  computed: {
    ...mapGetters({
      uploadUrl: 'uploadUrl',
      extensions: 'extensions'
    }),
    tagLabel() {
      return this.form.courseType === 0 ? '知识点' : '关键字'
    },
    formats() {
      return this.extensions.video.concat(this.extensions.document)
    },
    authorVisible() {
      return this.$route.path.indexOf('admin') !== -1
    }
  },
  methods: {
    ...mapActions({
      saveLesson: 'saveLesson',
      getLesson: 'getLesson',
      getLoggedInfo: 'getLoggedInfo'
    }),
    onSubmit() {
      let that = this
      that.$refs['new-course-form'].validate(valid => {
        if (!valid) return
        that.saveLesson({
          form: this.form,
          callback() {
            const path = that.authorVisible
              ? '/admin/lessons/index'
              : '/manage/courses/created'
            that.$router.push({ path: path })
          }
        })
      })
    },
    uploaded(res, file) {
      this.form.files = this.form.files.concat(res)
    },
    init() {
      let that = this
      var init = function(data) {
        that.getLoggedInfo()
        var form = that.form
        form.id = data && data.id
        form.subject = data && data.subject
        form.grade = data && data.grade
        form.courseType = (data && data.courseType) || 0
        form.edition = data && data.edition
        form.title = data && data.title
        that.$refs.uploader.setDefaultFiles(data && data.files)
        if (data && data.createdBy) {
          that.$refs.author.set(data.createdBy)
          form.createdById = data.createdBy.id
        }
        form.description = data && data.description
        form.tags = (data && data.tags) || []
        form.attachmentsEnableDownload = data && data.attachmentsEnableDownload
      }
      var id = this.$route.params.id
      if (id) {
        that.getLesson({
          id: id,
          callback(data) {
            init(data)
          }
        })
      } else {
        init()
      }
    }
  },
  mounted() {
    this.init()
  },
  activated() {
    this.init()
  }
}
</script>

<style lang="less" scoped>
form {
  // margin-top: 20px;
}
</style>
